﻿<template>
  <div class="map">
    <!-- <div id='allmap' ref='allmap'>11</div> -->
    <header class="header left">
      <div hidden id="leftCity" class="left nav">
        <ul>
          <li :class="{'nav_active': li1}" @click="li1 = true,li2 = false,li3 = false">
            <i class="nav_1"></i>
            <router-link to="/dataC">市级一张图展示</router-link>
          </li>
          <li :class="{'nav_active': li2}" @click="li1 = false,li2 = true,li3 = false">
            <i class="nav_2"></i>
            <router-link to="/dataD">区级一张图</router-link>
          </li>
          <li :class="{'nav_active': li3}" @click="li1 = false,li2=false,li3 = true">
            <i class="nav_3"></i>
            <router-link to="/map">车辆监控</router-link>
          </li>
        </ul>
      </div>
      <div hidden id="leftDistrict" class="left nav">
        <ul>
          <li :class="{'nav_active': li2}" @click="li1 = false,li2 = true,li3 = false">
            <i class="nav_2"></i>
            <router-link to="/dataD">区级一张图</router-link>
          </li>
          <li :class="{'nav_active': li3}" @click="li1 = false,li2=false,li3 = true">
            <i class="nav_3"></i>
            <router-link to="/map">车辆监控</router-link>
          </li>
        </ul>
      </div>
      <div class="header_center left">
        <h2>
          <strong>天津市餐厨垃圾收运处理信息化统计监管平台</strong>
        </h2>
        <!-- <p class='color_font'><small>Comprehensive service platform for smart tourism</small></p> -->
      </div>
      <div hidden id="RightCity" class="right nav text_right" >
        <ul style="display:flex;align-items:center">
          <li @click="dialogFormVisible1 = true">
            <i class="nav_7"></i>
            <a href="##">全市吨位统计</a>
          </li>
          <li @click="dialogFormVisible2 = true">
            <i class="nav_4"></i>
            <a href="##">按区吨位统计</a>
          </li>
          <li @click="dialogFormVisible3 = true">
            <i class="nav_8"></i>
            <a href="##">车辆进出统计</a>
          </li>
          <li style="height:auto" class="lihover">
            <p style="color:#fff;height:30px;margin-top:-15px">技术支持:</p>
            <p style="color:#fff;height:30px">联合远航</p>
            <!-- <dl style="color:#fff;margin-top:15px;margin-left:20px;font-weight:600">
              <dt style="margin-bottom:10px">技术支持：</dt>
              <dd>联合远航</dd>
            </dl> -->
          </li>
        </ul>
      </div>
      <div hidden id="RightDistrict" class="right nav text_right">
        <ul>
          <li @click="dialogFormVisible2 = true">
            <i class="nav_4"></i>
            <a href="##">按区吨位统计</a>
          </li>
          <li @click="dialogFormVisible3 = true">
            <i class="nav_8"></i>
            <a href="##">车辆进出统计</a>
          </li>
          <li style="height:auto" class="lihover">
            <p style="color:#fff;height:30px;margin-top:-15px">技术支持:</p>
            <p style="color:#fff;height:30px">联合远航</p>
            <!-- <dl style="color:#fff;margin-top:15px;margin-left:20px;font-weight:600">
              <dt style="margin-bottom:10px">技术支持：</dt>
              <dd>联合远航</dd>
            </dl> -->
          </li>
        </ul>
      </div>
      <el-dialog title="全市统计" :visible.sync="dialogFormVisible1" class="dialogwhole" width="40%">
        <el-form :model="form" class="dialogform">
          <el-form-item>
            <el-radio v-model="form.radio1" label="3">按日期：</el-radio>
            <el-date-picker v-model="form.valueDay1" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="form.radio1" label="4">按月份：</el-radio>
            <el-date-picker v-model="form.valueMonth1" type="month" placeholder="选择月"></el-date-picker>
          </el-form-item>
        </el-form>
        <!-- 内层弹框 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="searchTable1">查 询</el-button>
        </div>
      </el-dialog>
      <el-dialog title="全市统计" :visible.sync="dialoginnerVisible1" width="49%" class="dialogchild">
        <el-form class="dialogform" style="padding-top: 50px;">
          <button class="exportExcelButton" @click="exportExcelTable1">导 出</button>
          <table style="width:100%;text-align:center;border-collapse:collapse" class="tables">
            <tbody>
              <tr>
                <!-- <th rowspan="2">车牌号码</th> -->
                <th rowspan="2">区域名称</th>
                <th colspan="2">泔水</th>
                <th colspan="2">废油脂</th>
                <th rowspan="2">总吨数</th>
                <th rowspan="2" v-if="isMonthTable1">日均吨数</th>
                <th rowspan="2">操作</th>
              </tr>
              <tr>
                <td>车次（趟）</td>
                <td>吨数（吨）</td>
                <td>车次（趟）</td>
                <td>吨数（吨）</td>
              </tr>
              <tr v-for="item in listDataCity" :key="item.NAME">
                <td>{{item.ClientName}}</td>
                <td>{{item.SwillVehicleNumber}}</td>
                <td>{{item.SwillTonnages}}</td>
                <td>{{item.WasteOilVehicleNumber}}</td>
                <td>{{item.WasteOilTonnages}}</td>
                <td>{{item.TotalTonnages}}</td>
                <td v-if="isMonthTable1">{{item.DailyTonnages}}</td>
                <td>
                  <el-button size="mini" @click="searchTable2(item.ClientNo)">详情</el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </el-dialog>
      <el-dialog title="按区统计" :visible.sync="dialogFormVisible2" class="dialogwhole" width="50%">
        <el-form :model="form" class="dialogform">
          <el-form-item label="垃圾运送单位：" class="dialogformwidth wid70">
            <el-select v-model="form.company2" placeholder="请选择">
              <el-option
                v-for="item in selectCompany"
                :key="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NO"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="餐厨垃圾类型：" :label-width="formLabelWidth" class="wid75">
            <el-select v-model="form.type2" placeholder="请选择">
              <el-option
                v-for="item in selectType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="form.radio2" label="3">按日期：</el-radio>
            <el-date-picker v-model="form.valueDay2" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="form.radio2" label="4">按月份：</el-radio>
            <el-date-picker v-model="form.valueMonth2" type="month" placeholder="选择月"></el-date-picker>
          </el-form-item>
        </el-form>
        <!-- 内层弹框 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="searchTable2">查 询</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="dialogTitle2" :visible.sync="dialoginnerVisible2" width="49%" class="dialogchild">
        <el-form class="dialogform">
          <span class="spanEL" id='table2Title_sumST'>泔水总吨数：{{table2Title_sumST}}</span>
          <span class="spanEL" id='table2Title_sumST'>泔水总趟次：{{table2Title_sumSV}}</span>
          <span class="spanEL" id='table2Title_sumST'>废油脂总吨数：{{table2Title_sumWT}}</span>
          <span class="spanEL" id='table2Title_sumST'>废油脂总趟次：{{table2Title_sumWV}}</span>
          <span class="spanEL" id='table2Title_sumST'>日期：{{table2Title_date}}</span>
          <!-- <div class="wid25 dialogformwidth">2020年04月16日</div> -->
          <!-- <el-form-item label="泔水总吨数：" class="lableEL"><span class="spanEL" id='table2Title_sumST'>{{table2Title_sumST}}</span></el-form-item>
          <el-form-item label="泔水总趟次：" class="lableEL"><span class="spanEL" id='table2Title_sumSV'>{{table2Title_sumSV}}</span></el-form-item>
          <el-form-item label="废油脂总吨数：" class="lableEL"><span class="spanEL" id='table2Title_sumWT'>{{table2Title_sumWT}}</span></el-form-item>
          <el-form-item label="废油脂总趟次：" class="lableEL"><span class="spanEL" id='table2Title_sumWV'>{{table2Title_sumWV}}</span></el-form-item>
          <el-form-item label="日期：" class="lableEL"><span class="spanEL" id='table2Title_date'>{{table2Title_date}}</span></el-form-item> -->
          <button class="exportExcelButton" @click="exportExcelTable2">导 出</button>
          <table style="width:100%;text-align:center;border-collapse:collapse" class="tables">
            <tbody>
              <tr>
                <!-- <th rowspan="2">车牌号码</th> -->
                <th>车辆名称</th>
                <th>运输总趟次（趟）</th>
                <th>运输总吨数（吨）</th>
                <th>垃圾类型</th>
                <th>操作</th>
              </tr>
              <tr v-for="item in listDataDistrict" :key="item.NAME">
                <td>{{item.VehicleName}}</td>
                <td>{{item.Trips}}</td>
                <td>{{item.Tonnages}}</td>
                <td>{{item.RubbishType}}</td>
                <td>
                  <el-button size="mini" @click="searchTable4(item.VehicleName)">详情</el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </el-dialog>
      <el-dialog title="车辆详情" :visible.sync="dialogFormVisible3" class="dialogwhole" width="50%">
        <el-form :model="form" class="dialogform">
          <el-form-item label="垃圾运送单位：" class="dialogformwidth wid70">
            <el-select v-model="form.company3" placeholder="请选择">
              <el-option
                v-for="item in selectCompany"
                :key="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NO"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="餐厨垃圾类型：" :label-width="formLabelWidth" class="wid75">
            <el-select v-model="form.type3" placeholder="请选择">
              <el-option
                v-for="item in selectType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="form.radio3" label="3">按日期：</el-radio>
            <el-date-picker v-model="form.valueDay3" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="form.radio3" label="4">按月份：</el-radio>
            <el-date-picker v-model="form.valueMonth3" type="month" placeholder="选择月"></el-date-picker>
          </el-form-item>
        </el-form>
        <!-- 内层弹框 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="searchTable3">查 询</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="dialogTitle3" :visible.sync="dialoginnerVisible3" width="49%" class="dialogchild">
        <el-form class="dialogform" style="padding-top: 50px;">
          <button class="exportExcelButton" @click="exportExcelTable3">导 出</button>
          <table style="width:100%;text-align:center;border-collapse:collapse" class="tables">
            <tbody>
              <tr>
                <th>车辆名称</th>
                <th>车辆进厂时间</th>
                <th>车辆出厂时间</th>
                <th>运输吨数（吨）</th>
                <th>垃圾类型</th>
              </tr>
              <tr v-for="item in listCar" :key="item.VehicleName">
                <td>{{item.VehicleName}}</td>
                <td>{{item.InTime}}</td>
                <td>{{item.OutTime}}</td>
                <td>{{item.Tonnages}}</td>
                <td>{{item.RubbishType}}</td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </el-dialog>
      <el-dialog :title="dialogTitle2" :visible.sync="dialoginnerVisible4" width="49%" class="dialogchild">
        <el-form class="dialogform">
          <table style="width:100%;text-align:center;border-collapse:collapse" class="tables">
            <tbody>
              <tr>
                <th>车辆名称</th>
                <th>称重时间</th>
                <th>称重（kg）</th>
              </tr>
              <tr v-for="item in listDataDistrictDetail" :key="item.VehicleName">
                <td>{{item.VehicleName}}</td>
                <td>{{item.WeightTime}}</td>
                <td>{{item.Tonnages}}</td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </el-dialog>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
// import BMap from 'BMap'
// import BaiduMap from '@/views/EatHutch/Map.vue'
import export2Excel from '../../components/exportExcel/index'
export default {
  components: {
    // 'baidu-map': BaiduMap
  },
  data () {
    return {
      // 数据
      selectType: [{
        value: '',
        label: '全部'
      }, {
        value: '泔水',
        label: '泔水'
      }, {
        value: '废油脂',
        label: '废油脂'
      }],
      selectCompany: [],
      listDataCity: [],
      listDataDistrict: [],
      listDataDistrictDetail: [],
      listCar: [],
      test: {
        list: []
      },
      li3: true,
      li2: false,
      li1: false,
      dialogFormVisible1: false,
      dialoginnerVisible1: false,
      dialogFormVisible2: false,
      dialoginnerVisible2: false,
      dialogFormVisible3: false,
      dialoginnerVisible3: false,
      dialoginnerVisible4: false,
      dialogTitle2: '',
      dialogTitle3: '',
      isMonthTable1: false,
      form: {
        name: '',
        region: '',
        radio1: '3',
        valueDay1: '',
        valueMonth1: '',
        radio2: '3',
        valueDay2: '',
        valueMonth2: '',
        company2: '',
        type2: '泔水',
        radio3: '3',
        valueDay3: '',
        valueMonth3: '',
        company3: '',
        type3: '泔水'
      },
      table2Title_date: '',
      table2Title_sumST: '',
      table2Title_sumSV: '',
      table2Title_sumWT: '',
      table2Title_sumWV: ''
    }
  },
  methods: {
    initFrame () {
      setTimeout(() => {
        var cod = localStorage.getItem('codes')
        this.form.company1 = cod
        this.form.company2 = cod
        this.form.company3 = cod
        if (cod === '00000') {
          document.getElementById('leftCity').removeAttribute('hidden', true)
          document.getElementById('RightCity').removeAttribute('hidden', true)
        } else {
          document.getElementById('leftDistrict').removeAttribute('hidden', true)
          document.getElementById('RightDistrict').removeAttribute('hidden', true)
        }
        var dateDefault = new Date()
        dateDefault.setDate((new Date()).getDate() - 1)
        this.form.valueDay1 = dateDefault
        this.form.valueDay2 = dateDefault
        this.form.valueDay3 = dateDefault
      }, 100)
    },
    // 方法
    async getSelectCompany () {
      var cod = localStorage.getItem('codes')
      const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetStaticsGroupApi?ClientNo=' + cod)
      this.selectCompany = data.filter(item => {
        console.log(item)
        return item
      })
    },
    async searchTable1 () {
      var cod = localStorage.getItem('codes')
      var date = ''
      var datetype = ''
      if (this.form.radio1 === '3') {
        date = this.dateFormatDay(this.form.valueDay1)
        datetype = '日'
        this.isMonthTable1 = false
      }
      if (this.form.radio1 === '4') {
        date = this.dateFormatMonth(this.form.valueMonth1)
        datetype = '月'
        this.isMonthTable1 = true
      }
      const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetWeightTJApi?ClientNo=' + cod + '&Date=' + date + '&Type=' + '&DateType=' + datetype)
      this.listDataCity = data.filter(item => {
        return item
      })
      this.dialoginnerVisible1 = true
      // console.log(this.dialoginnerVisible1)
    },
    exportExcelTable1 () {
      const excelName = '全市吨位统计表'
      var tHeader = ['区域名称', '泔水车次（趟）', '泔水吨数（吨）', '废油脂车次（趟）', '废油脂吨数（吨）', '总吨数']
      var filterVal = ['ClientName', 'SwillVehicleNumber', 'SwillTonnages', 'WasteOilVehicleNumber', 'WasteOilTonnages', 'TotalTonnages']
      if (this.isMonthTable1) {
        tHeader.push('日均吨数')
        filterVal.push('DailyTonnages')
      }
      export2Excel(tHeader, filterVal, this.listDataCity, excelName)
    },
    changeHandler (value) {
      console.log('changeHandler:' + value)
    },
    async searchTable2 (value) {
      if (!this.form.company2) {
        this.$message.error('请选择【垃圾运送单位】')
        return
      }
      var date = ''
      if (this.form.radio2 === '3') {
        date = this.dateFormatDay(this.form.valueDay2)
      }
      if (this.form.radio2 === '4') {
        date = this.dateFormatMonth(this.form.valueMonth2)
      }
      this.table2Title_date = date
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetTonnagesApi?Date=' + date + '&&ClientNo=' + this.form.company2 + '&&Type=' + this.form.type2
      console.log('url=' + url)
      const { data } = await this.$axios.get(url)
      this.listDataDistrict = data.Tonnages.filter(item => {
        return item
      })
      this.table2Title_sumST = data.SwillTonnages + '吨'
      this.table2Title_sumSV = data.SwillTrips + '次'
      this.table2Title_sumWT = data.WasteOilTonnages + '吨'
      this.table2Title_sumWV = data.WasteOilTrips + '次'
      this.selectCompany.forEach(item => {
        if (this.form.company2 === item.CLIENT_NO) {
          this.dialogTitle2 = item.CLIENT_NAME
        }
      })
      this.dialoginnerVisible2 = true
    },
    exportExcelTable2 () {
      const excelName = '区级吨位统计表'
      const tHeader = ['车辆名称', '运输总趟次（趟）', '运输总吨数（吨）', '垃圾类型']
      const filterVal = ['VehicleName', 'Trips', 'Tonnages', 'RubbishType']
      export2Excel(tHeader, filterVal, this.listDataDistrict, excelName)
    },
    async searchTable3 () {
      if (!this.form.company3) {
        this.$message.error('请选择【垃圾运送单位】')
        return
      }
      var date = ''
      if (this.form.radio3 === '3') {
        date = this.dateFormatDay(this.form.valueDay3)
      }
      if (this.form.radio3 === '4') {
        date = this.dateFormatMonth(this.form.valueMonth3)
      }
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetInOutStatisticsApi?Date=' + date + '&&ClientNo=' + this.form.company3 + '&&Type=' + this.form.type3
      console.log('url=' + url)
      const { data } = await this.$axios.get(url)
      this.listCar = data.filter(item => {
        return item
      })
      this.selectCompany.forEach(item => {
        if (this.form.company3 === item.CLIENT_NO) {
          this.dialogTitle3 = item.CLIENT_NAME
        }
      })
      this.dialoginnerVisible3 = true
    },
    exportExcelTable3 () {
      const excelName = '车辆进出统计表'
      const tHeader = ['车辆名称', '车辆进厂时间', '车辆出厂时间', '运输吨数（吨）', '垃圾类型']
      const filterVal = ['VehicleName', 'InTime', 'OutTime', 'Tonnages', 'RubbishType']
      export2Excel(tHeader, filterVal, this.listCar, excelName)
    },
    async searchTable4 (carName) {
      if (!this.form.company2) {
        console.log('请选择区域')
        return
      }
      var date = ''
      if (this.form.radio2 === '3') {
        date = this.dateFormatDay(this.form.valueDay2)
      }
      if (this.form.radio2 === '4') {
        date = this.dateFormatMonth(this.form.valueMonth2)
      }
      var url = 'http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetWeightByCphApi?Date=' + date + '&&ClientNo=' + this.form.company2 + '&&Type=' + this.form.type2 + '&&VehicleNo=' + carName
      console.log('url=' + url)
      const { data } = await this.$axios.get(url)
      this.listDataDistrictDetail = data.filter(item => {
        return item
      })
      this.dialoginnerVisible4 = true
    },
    dateFormatDay (date) {
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      return year + '-' + month + '-' + day
    },
    dateFormatMonth (date) {
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      return year + '-' + month
    }
  },
  mounted () {
    this.initFrame()
    this.getSelectCompany()
  }
}
</script>

<style>
body,
html,
.map,
#allmap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: '微软雅黑';
}
.el-form-item {
  margin-left: 15px;
  margin-right: 15px;
}
.dialogform {
  padding-top: 20px;
}
.dialogchild .el-dialog__header{
  padding-top: 0px;
}
.spanEL {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 8px;
    margin-left: 5px;
    margin-right: 21px;
    width: 40%;
}
.exportExcelButton {
    position: absolute;
    right: 50px;
    top: 70px;
    margin-bottom: 10px;
    width: 100px;
    height: 30px;
}
.el-select-dropdown__item {
  font-weight: bold;
  font-size: 16px!important;
}
.el-input__inner {
  font-weight: bold;
  font-size: 16px!important;
}
.lihover:hover{
  background-color: none;
  box-shadow:0 0 0 5px rgba(0, 0, 0, 0) inset!important;
}
</style>
